<script setup>
import {BaseImgUrl} from "../../utils/lshttp";
import {ref, onMounted} from "vue";
import {getBuToPagePath, toMiniAppBusiness, toMiniAppRedPage} from "../../utils/utils";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
const commonInfoStore = useCommonInfoStore()
import {useUserInfoStore} from "../../stores/modules/userInfo";
// 用户储存信息
const userInfoStore = useUserInfoStore()
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器

const props = defineProps({
  shopGF: {
    type: Object
  },
  signUp: {
    type: Number
  },
  newUser: {
    type: String
  },
  userInfo: {
    type: Object
  },
})
const emits = defineEmits(['orderGfNoFun', 'PlaceOrderFun'])
const signUp = ref()
onMounted(() => {
  signUp.value = props.signUp
  console.log('signUp===', props.signUp)
  console.log('shop==', props.shop)
})
const mtRedData = ref() //美团
// 允许跳转领红包
const doMeiTuanAndQiangDan = async () => {
  mtRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[0] : []
  await toMiniAppRedPage(mtRedData.value)
  signUp.value = 2 // 跳转平台领取红包，状态为2
  emits('orderGfNoFun', true)
}
// 去平台店铺下单
const goShop = (type, path) => {
  toMiniAppBusiness(type, path)
  emits('PlaceOrderFun', true)
}
// 监听跳转
const handleLaunch = (e) => {
  console.log("handleLaunch", e)
}
// 监听错误
const handleError = (e) => {
  console.log("handleError", e)
}
</script>

<template>
  <view class="shop_process_num_right">
    <view class="shop_process_num_right_item">
      <view class="shop_process_num_line"><u-line direction="col" :color="signUp == 1 || signUp == 2 ? '#FF8415' : '#D3D3D3'" :dashed="true"></u-line></view>
      <view class="shop_process_num_right_item_title"><view class="process_num" :class="signUp == 1 || signUp == 2 ? 'process_num_active' : ''">1</view>前往美团领取专属外卖红包</view>
      <view @click="doMeiTuanAndQiangDan" class="shop_process_num_right_item_warp meituan meituan_active">
        <image :src="BaseImgUrl + '/shop/process/process_meituan02.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        <text style="padding-left: 10rpx;">第一步· 领最高88元外卖红包</text>
        <!-- #ifdef H5 -->
        <view class="btns_box" style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
          <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                :username="commonInfoStore.reward.order[0].original_id"
                                :path="commonInfoStore.reward.order[0].path"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
        </view>
        <!-- #endif -->
      </view>
      <view v-if="signUp == 1" @click="doMeiTuanAndQiangDan" class="finger">
        <view class="circle"></view>
        <image :src="BaseImgUrl + '/shop/process/process_img01.png'" mode="widthFix" style="width: 72rpx;height: 72rpx;z-index: 1;position: relative;"></image>
      </view>
    </view>
    <view class="shop_process_num_right_item">
      <view class="shop_process_num_line"><u-line direction="col" :color="signUp == 2? '#FF8415' : '#D3D3D3'" :dashed="true"></u-line></view>
      <view class="shop_process_num_right_item_title">
        <view class="process_num" :class="signUp == 2 ? 'process_num_active' : ''">2</view>
        <text>前往美团点外卖，返利
          <text v-if="newUser == '新用户'" style="color: #FF6200">实付金额
            {{twoFixed(shopGF?.member_commission.ratio)}}%，
            最高返{{ twoFixed(shopGF?.member_commission.maxCommission) }}
          </text>
          <text v-if="newUser == '老用户'" style="color: #FF6200">实付金额
            {{ userInfo.is_member === 0 ? twoFixed(shopGF?.general_commission.ratio) : twoFixed(shopGF?.member_commission.ratio)}}%，
            最高返
            {{ userInfo.is_member === 0 ? twoFixed(shopGF?.general_commission.maxCommission): twoFixed(shopGF?.member_commission.maxCommission) }}
          </text>
        </text>
      </view>
      <view @click="goShop(1, props.shopGF?.wxPath)" class="shop_process_num_right_item_warp meituan meituan_active" >
        <view class="shop_process_num_right_item_warp_text">第二步·前往美团店铺点外卖</view>
        <!-- #ifdef H5 -->
        <view class="btns_box" style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
          <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                :username="props.shopGF?.wxAppOrgid"
                                :path="props.shopGF?.wxPath"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
        </view>
        <!-- #endif -->
      </view>
      <view class="shop_process_num_right_item_warp_tip">本活动与美团官方合作，请使用绑定{{userInfoStore.userInfo.mt_phone}} 的美团账号在<text style="color: #222222;">报名后30分钟内下单，超时无法返利</text></view>
      <view v-if="signUp == 2" @click="goShop(1, props.shopGF?.wxPath)" class="finger" style="bottom: 70rpx">
        <view class="circle"></view>
        <image :src="BaseImgUrl + '/shop/process/process_img01.png'" mode="widthFix" style="width: 72rpx;height: 72rpx;z-index: 1;position: relative;"></image>
      </view>
    </view>
    <view class="shop_process_num_right_item">
      <view class="shop_process_num_right_item_title" style="justify-content: space-between">
        <view class="process_num">3</view>
        <view class="">
          <view style="font-size: 28rpx;color: #3D3D3D;">外卖下单后，美团将在1分钟内自动同步订单 信息并进入下一步</view>
          <view style="font-size: 24rpx;color: #666666;display: flex;line-height: 30rpx;margin-top: 10rpx;">
            <view>tips:</view>
            <view style="flex: 1;">若下单后状态未变更的，请先取消外卖订单再联系 平台客服处理</view></view>
        </view>
      </view>
    </view>

  </view>
</template>

<style scoped lang="scss">
pages{
  width: 100%;
}
.shop_process_num_right{
  padding: 20rpx 30rpx 30rpx 30rpx;
  .shop_process_num_right_item{
    padding-bottom: 10rpx;
    width: 100%;
    position: relative;
    .shop_process_num_line{
      width: 48rpx;
      height: 100%;
      position: absolute;
      left: 0;
      top: 20rpx;
      z-index: 1;
    }
    .shop_process_num_right_item_title{
      min-height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      color: #3D3D3D;
      padding-top: 20rpx;
      padding-left: 48rpx;
      display: flex;
      position: relative;
      margin-bottom: 20rpx;
      .process_num{
        position: absolute;
        left: -4rpx;
        top: 20rpx;
        z-index: 2;
        color: #FFFFFF;
        background: #CDCDCD;
        width: 36rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        font-size: 28rpx;
        border-radius: 50%;
      }
      .process_num_active{
        background: #FD7C22;
      }
      .copy_order{
        height: 34rpx;
        line-height: 34rpx;
        margin-top: 10rpx;
        font-size: 24rpx;
        font-weight: normal;
        color: #888888;
        padding: 8rpx 12rpx;
        border: 2rpx solid #E4E4E4;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
      }
    }
    .shop_process_num_right_item_warp{
      height: 72rpx;
      line-height: 72rpx;
      font-size: 26rpx;
      margin-left: 48rpx;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .shop_process_num_right_item_warp_tip{
      font-size: 24rpx;
      color: #666666;
      line-height: 40rpx;
      margin-left: 48rpx;
      padding-top: 10rpx;
    }
    .shop_process_num_right_item_put{
      height: 32rpx;
      line-height: 60rpx;
      padding: 20rpx 8rpx 20rpx 30rpx;
      border: 2rpx solid #E1E1E1;
      border-radius: 50rpx;
      font-size: 26rpx;
      margin-left: 48rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .shop_process_num_right_btn{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        border-radius: 50rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        background: linear-gradient( 270deg, #D3D3D3 0%, #E2E2E2 100%);
      }
    }
    .finger{
      width: 72rpx;
      height: 72rpx;
      position: absolute;
      right: 0;
      bottom: -20rpx;
      z-index: 10;
    }
  }
}
/* 手指动画css */
.circle {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #fcb141 ;
  border-radius: 50%;
  right: 48rpx;
  bottom: 48rpx;
}
.circle:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: .4;
  background-color: pink;
  animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
}
@keyframes scale {
  0% {
    transform: scale(1)
  }

  50%,
  75% {
    transform: scale(3)
  }

  78%,
  100% {
    opacity: 0
  }
}
@keyframes scales {
  0% {
    transform: scale(1)
  }

  50%,
  75% {
    transform: scale(2)
  }

  78%,
  100% {
    opacity: 0
  }
}
/* 平台样式背景 */
.meituan{
  color: #333333;
  background: rgba(255, 214, 2, 0.5);
}
.meituan_active{
  background: rgba(255, 214, 2, 1) !important;
}
.elm{
  color: #FFFFFF;
  background: rgba(67, 160, 255, .5);
}
.elm_active{
  background: rgba(67, 160, 255, 1) !important;
}
.jd{
  color: #FFFFFF;
  background: rgba(255, 62, 30, .5);
}
.jd_active{
  background: rgba(255, 62, 30, 1) !important;
}
</style>